<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.0.0.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background-color: #000000;
			}
			
			.btn {
				width: 200px;
				height: 40px;
				margin-left: -180px;
				margin-top: 50px;
				border: 1px solid black;
				border-radius: 10px;
				background-color: aqua;
				transition: left 1s;
			}
			
			#zzz {
				border: 10px solid #FF0000;
				width: 400px;
				height: 700px;
				float: left;
				position: relative;
				left: -370px;
				transition: left 1s;
			}
			
			#zhushen {
				width: 301px;
				height: 301px;
			}
		</style>
	</head>

	<body>
		<!--主神的位置-->
		<div id="zhushen"><img src="img/001.gif" onclick="zhushen()"></div>

		<input id="aaa" class="btn" type="button" value="科技类" onmouseover="over(this)" onmouseout="out(this)" /><br />
		<input id="bbb" class="btn" type="button" value="辅助类" onmouseover="over(this)" onmouseout="out(this)" /><br />
		<input id="ccc" class="btn" type="button" value="魔法修真类" onmouseover="over(this)" onmouseout="out(this)" /><br />
		<input id="ddd" class="btn" type="button" value="娱乐类" onmouseover="over(this)" onmouseout="out(this)" /><br />
		<input id="eee" class="btn" type="button" value="添加兑换物" style="background-color: chocolate;" onmouseover="over(this)" onmouseout="out(this)" /><br />

	</body>

</html>
<script>
	//	var zzz = document.getElementById("zzz");
	//	var zhushen01 = document.getElementById("zhushen");
	//鼠标移入按钮事件
	function over(e) {
		e.style.width = "300px";
		e.style.height = "80px";
		e.style.marginLeft = "0px";
		e.style.marginTop = "30px";
	}
	//鼠标移出按钮事件
	function out(e) {
		e.style.width = "200px";
		e.style.height = "40px";
		e.style.marginLeft = "-180px";
		e.style.marginTop = "50px";
	}
	//
	//	//鼠标移入边框事件
	//	function over_zzz() {
	//		zzz.style.left = "0px";
	//
	//	}
	//	//鼠标移出边框事件
	//	function out_zzz() {
	//		zzz.style.left = "-370px";
	//		zhushen01.style.display="inline";
	//
	//	}
	//主神居中事件
	$(window).resize(function() {
		$("#zhushen").css({
			position: "absolute",
			left: ($(window).width() - $("#zhushen").outerWidth()) / 2,
			top: ($(window).height() - $("#zhushen").outerHeight()) / 2 + $(document).scrollTop()
		});
	});
	$(window).resize();
	//点击主神事件
	//	function zhushen() {
	//		zhushen01.style.display = "none";
	//		over_zzz();
	//	}
</script>